<template>
  <div class="swiper-wrap">
    <div class="body" v-if="roomInfo.status != ROOM_STATUS.not_started && !isMinimum">
      <div class="swiper-button-black left" @click="prevBoard"></div>
      <swiper :options="swiperOption">
        <swiper-slide
          class="img-box"
          :class="{ current_img: currentIndex === index + 1 }"
          v-for="(item, index) in TDListInfo"
          :key="index"
          :style="{ backgroundImage: 'url(' + item.bgImg + ')' }"
          @click.native="tabteduBoard(item, index)"
        >
          <div class="index_list">{{ index + 1 }}</div>
        </swiper-slide>
      </swiper>
      <div class="swiper-button-black right" @click="nextBoard"></div>
    </div>
  </div>
</template>

<script >
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { ROOM_STATUS, USER_TYPE } from "../../../util/constants";
import { mapGetters } from "vuex";
export default {
  props: {
    TDListInfo: {
      type: Array,
      default: [],
    },
    currentIndex: Number,
  },
  data() {
    return {
      ROOM_STATUS,
      USER_TYPE,
      swiperOption: {
        updateOnWindowResize: true,
        spaceBetween: 10,
        slidesPerView: 6,
        // watchSlidesProgress: true,
        prevButton: ".swiper-button-prev",
        nextButton: ".swiper-button-next",
      },
    };
  },
  computed: {
    ...mapGetters(["roomInfo", "userInfo"]),
    // 观看模式,最低用户权限
    isMinimum() {
      if (this.userInfo.userType == USER_TYPE.audience) {
        let isMasterSpeech = this.userInfo.isMasterSpeech; //是否是主讲
        let connectSpeechStatus = this.userInfo.connectSpeechStatus; //连麦状态
        let isInteraction = this.userInfo.isInteraction; //是否是互动
        if (!isMasterSpeech && connectSpeechStatus == 1 && !isInteraction) {
          return true;
        }
      } else {
        return false;
      }
      return false;
    },
  },
  components: {
    swiper,
    swiperSlide,
  },
  methods: {
    tabteduBoard(item, index) {
      this.$emit("tabteduBoard", item, index);
    },
    prevBoard() {
      this.$emit("prevBoard");
    },
    nextBoard() {
      this.$emit("nextBoard");
    },
  },
};
</script>

<style lang="scss"  scoped>
.swiper-wrap {
  height: 8.66vh;
  .body {
    margin: 0 auto;
    padding: 0px 67px;
    box-sizing: border-box;
    width: 100%;
    background-color: #f0f0f0;
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative;
  }
  .swiper-container {
    width: 100%;
  }
  .img-box {
    // width: 150px !important;
    height: 63px;
    box-sizing: border-box;
    border: 3px solid #f0f0f0;
    background-size: cover;
    background-position: center;
    .index_list {
      position: absolute;
      width: 15px;
      height: 15px;
      font-size: 12px;
      background: #f0f0f0;
      border: 1px solid #000;
      color: #000;
      bottom: 0;
      text-align: center;
      left: 0;
      z-index: 99;
    }
  }
  .current_img {
    border: 3px solid blue;
  }
  .swiper-button-black {
    position: absolute;
    width: 32px;
    height: 32px;
    background: #ffffff;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    cursor: pointer;
    &.left {
      left: 15px;
    }
    &.right {
      right: 15px;
    }
  }
}
</style>
